<template>
  <div>
    <!-- 
      1. 全局组件 router-link
      2. 相当与就是a标签 href属性改成to 并且to没有#
      3. 提供导航高亮 自带类名

      2种传参方式
        2.1 /path?参数名=值
        2.2 /path/值 - 需要提前配置 动态路由 因为传的值会有变化所以配置的参数名自己起个名字
     -->
    <div class="footer_wrap">
      <!-- 
        user/12345
        user?id=12345


        高亮需要和我们申明式导航的to一致
       -->
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my/123">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <!-- 这里显示页面组件 - 挖个坑
        当点击发现音乐 那应该显示发现音乐这个组件
        当点击xXX  那应该就显示对应XXX这个页面组件
        router-view 全局组件 路由出口 - 白话理解就是占个坑
       -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}
/* 
exact 精确准确
router-link-exact-active 精确匹配
    to="/xxx"  只能匹配 /xxx
router-link-active 模糊匹配
    to="/xxx"  匹配/xxx开头都可以 比如 /xxx/a /xxx/b 
    /xx/b 这个不行 必须匹配/xxx开头
*/
.router-link-active {
  background-color: pink !important;
  color: #fff !important;
}
.sf-active {
  background-color: teal !important;
  color: #fff !important;
}
</style>
